<template>
	<view class="analysis-box">
		<view class="analysis-title">
			<view>答案解析</view>
		</view>

		<view class="analysis-text" v-if="text">
			<!-- <rich-text :nodes="text"></rich-text> -->
			<u-parse :content="text" :tagStyle="style" @imgTap="previewImage"></u-parse>
		</view>
		<view class="analysis-video" v-if="video">
			<video custom-cache="{undefined{false}}" :src="video"
				:poster="video + '?vframe/jpg/offset/1'"></video>
		</view>
	</view>

</template>

<script>
	export default {
		props: {
			text: {
				type: String,
				default: ''
			},
			video: {
				type: String,
				default: ''
			},
		},
		data(){
			return {
				style:{
					img:'width:auto;max-width:100%;mode:"widthFix"'//display:block;margin:0 auto
				}
			}
		},
		methods:{
			previewImage(url){
				console.log(url)
				uni.previewImage({
					urls:[url]
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.analysis-box {
		margin-top: 40rpx;
		margin-bottom: 40rpx;
		border-top: 10rpx solid #acbd7f;
		padding-top: 40rpx;

		.analysis-title {
			text-align: center;
			border-bottom: 1rpx solid #eaeaea;
			padding-bottom: 30rpx;

			view {
				border-bottom: 2rpx solid #b07953;
				padding-bottom: 10rpx;
				display: inline-block;
				line-height: 1;
				margin-bottom: 20rpx;
			}
		}

		.analysis-text {
			margin-top: 20rpx;
			color: #333;
		}

		.analysis-video {
			margin-top: 20rpx;

			video {
				width: 100%
			}
		}

	}
</style>
